<template>
  <div class="equipmentFile">
    <SearchCom @searchEvent="searchEvent" />
    <div class="filter_box">
      <!-- <p class="filter_item">类型 <span class="up-triangle"></span></p> -->
      <!-- <p @click="handleFilter(0)" class="filter_item">
        类型 <span class="down-triangle"></span>
      </p>
      <p @click="handleFilter(1)" class="filter_item">
        状态 <span class="down-triangle"></span>
      </p> -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>

    <div class="ticket_box">
      <EquipmentFileItem v-for="item in planList" :key="item.id" :data="item" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// const router = useRouter();
// const route = useRoute();
import EquipmentFileItem from '@/components/equipmentFileItem.vue';
const planList = [
  {
    id: 1,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    number: 66666,
    state: 0,
    stateName: '已完成',
    val: '开始任务',
    date: '2024-11-28',
    name: '张三疯',
  },
  {
    id: 2,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    number: 66666,
    state: 1,
    stateName: '待执行',
    val: '开始任务',
    date: '2024-11-28',
    name: '张三疯',
  },
  {
    id: 3,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    state: 2,
    stateName: '待执行',
    val: '开始任务',
    date: '2024-11-28',
    name: '张三疯',
  },
  {
    id: 4,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    state: 3,
    stateName: '已完成',
    val: '开始任务',
  },
  {
    id: 1,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    number: 66666,
    state: 0,
    stateName: '已完成',
    val: '开始任务',
  },
  {
    id: 2,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    number: 66666,
    state: 1,
    stateName: '待执行',
    val: '开始任务',
    date: '2024-11-28',
    name: '张三疯',
  },
  {
    id: 3,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    state: 2,
    stateName: '待执行',
    val: '开始任务',
    date: '2024-11-28',
    name: '张三疯',
  },
  {
    id: 4,
    sb: '空压机1#',
    deadline: '10天后到期',
    jh: '点巡检计划',
    loacl: 'A车间B角落',
    state: 3,
    stateName: '已完成',
    val: '开始任务',
    date: '2024-11-28',
    name: '张三疯',
  },
];
const value1 = ref(0);
const value2 = ref(0);
const option1 = [
  { text: '类型', value: 0 },
  { text: '类型1', value: 1 },
  { text: '类型2', value: 2 },
];
const option2 = [
  { text: '状态', value: 0 },
  { text: '状态1', value: 1 },
  { text: '状态2', value: 2 },
];
function searchEvent(val) {
  console.log('searchEvent', val);
}
</script>

<style scoped lang="scss">
.equipmentFile {
  padding: 0 0 48px 0;
  width: 100%;
  height: calc(100vh - 110px);
  overflow-y: hidden;

  .ticket_box {
    height: 100%;
    overflow-y: auto;
  }
  .filter_box {
    display: flex;
    justify-content: center;
    gap: 0 24px;
    .filter_item {
      width: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .van-dropdown-menu__bar {
    box-shadow: transparent;
  }
}
</style>
